import { List, Card } from 'antd';
import ReactMarkdown from 'react-markdown';
import { getItemContent, MessageItem } from '../../api/chat';
import React from 'react';

type ListMessageProps = {
  messages: MessageItem[];
};

const ListMessage = ({ messages }: ListMessageProps) => {
  return (
    <List
      className="message-list"
      itemLayout="horizontal"
      dataSource={messages}
      renderItem={(item, index) => (
        <List.Item
          key={index}
          style={{ 
            textAlign: 'left',
            maxWidth: '100%',
            margin: index % 2 === 0 ? '10px 0 10px auto' : '10px auto 10px 0'
          }}
        >
          <Card
            size="small"
            type={index === 0 ? 'inner' : undefined}
            style={{ 
              backgroundColor: item.role === 'user' ? '#ffffff' : '#e9ecef',
              border: 'none'
            }}
          >
            <ReactMarkdown components={{
              code: ({ className, children, ...props }) => {
                // 创建安全的props副本，移除可能导致类型冲突的属性
                const safeProps = { ...props } as React.HTMLAttributes<HTMLPreElement>;
                //delete safeProps.node;
                
                return (
                  <pre 
                    {...safeProps}
                    style={{
                      backgroundColor: '#f6f8fa',
                      padding: '8px',
                      borderRadius: '4px',
                      fontSize: '14px'
                    }}
                  >
                    <code className={className}>
                      {String(children).replace(/\n$/, '')}
                    </code>
                  </pre>
                );
              }
            }}>
              {getItemContent(item) || ''}
            </ReactMarkdown>
          </Card>
        </List.Item>
      )}
    />
  );
};

export default ListMessage;